<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>中石化组织机构</title>
    <#include "../../commonFile/quote.ftl"/>
    <script>
        var $table;
        $(function(){
            treeUnit();
            tableUnit();
        });
        //初始化树
        function treeUnit(){
            $.ajax({
                type: 'post',
                url: '/SystemSinopecOrg/selectTree',
                async: false,
                dataType: 'json',
                success: function (result) {
                    if(result.success == true){
                        $('#treeview').treeview({
                            highlightSelected: true,//当选择节点时是否高亮显示。
                            showBorder: true,//是否在节点上显示边框。
                            showImage: true,
                            showIcon:true,
                            levels:1,
                            data: result.data,
                            loadingIcon:"fa fa-hourglass",//懒加载过程中显示的沙漏字符图标
                            lazyLoad:function(node,func){
                                $.ajax({
                                    type:"get",
                                    url:"/SystemSinopecOrg/childTreeNodes",
                                    data: {id:node.id},
                                    async:false,
                                    success:function(data,status){
                                        func(data);
                                        //$("#tree").treeview("addNode", [singleNode,node]);
                                    }
                                });
                            }//loaddata为点击懒加载节点目录时，运行的函数名称，把后端的数据添加到这个节点下面
                        });
                    }else{
                        alert("加载失败");
                    }
                }
            });
            //树节点点击事件
            $('#treeview').on('nodeSelected', function(event, data) {
                $("#treeid").val(data.id);
                $("#table").bootstrapTable("refresh",{
                    url:'/SystemSinopecOrg/selectGrid',
                    silent: true
                });
            });
        }
        //初始化表格
        function tableUnit(){
            $table = $("#table").bootstrapTable({
                contentType:'application/x-www-form-urlencoded; charset=UTF-8',//使用post传参，去掉后无法成功
                method: "post",
                toolbar:"#toolbar",
                cache: false,            //禁用ajax缓存
                striped: true,           //表格显示条纹
                pagination: true,        //在底部显示分页组件
                pageSize: 10,             // 页面数据条数
                pageNumber: 1,            // 首页页码
                sidePagination: 'server', // 设置为服务器端分页
                showColumns:true,        //是否显示内容列下拉框
                showToggle:false,         //切换详细视图和列表视图
                queryParamsType: '',
                idField:'orgcode',
                queryParams:function (params){
                    return {
                        pageSize:params.pageSize,
                        pageNum:params.pageNumber,
                        parentCode:$("#treeid").val(),
                        orgname:$("#account").val()
                    }
                },
                columns:[{
                    checkbox: true,
                    align: 'center'
                },{
                    field:'orgname',  //返回json中的name
                    title:'组织机构名称',   //表格表头显示文字
                    align:'center',   //左右居中
                    valign: 'left', // 上下居中
                },
                    {
                        field:'orgNature',
                        title:'机构性质',
                        align:'center',
                        valign: 'middle'
                    },{
                        field:'orgType',
                        title:'机构类型',
                        align:'center',
                        valign: 'middle'
                    },{
                        field:'isyes',
                        title:'是否启用',
                        align:'center',
                        valign: 'middle',
                        formatter: function (value, row, index) {
                           if(value == true){
                               return "启用";
                           }else{
                               return "禁用";
                           }
                        }
                    }
                ]
            });
        }
        //表格查询
        function search(){
            $("#table").bootstrapTable("refresh");
        }
    </script>
</head>
<body>
<div class="container-fluid"style="height:100%;width:100%;">
    <div id="toolbar">
        <form id="form" class="form-inline" style="display: inline-block;">
            <div class="form-group">
                <input type="text" class="form-control input-sm" id="account" name="account" placeholder="用户名">
            </div>
            <button type="button" class="btn btn-default btn-sm" onclick="search()">查询</button>
        </form>
    </div>
    <div class="row" style="display: flex;height:100%;">
        <div class="col-xs-4">
            <div id="treeview" class=""></div>
        </div>
        <div class="col-xs-8" style="position: fixed;left:360px;">
            <table id="table"></table>
            <input type="text" style="display: none;" id ="treeid" name="treeid"/>
        </div>
    </div>
</div>
</body>
</html>